<template>
  <div id="components-modal-demo-position">
    <a-modal
      centered
      :visible="true"
      title="修改密码"
      :width="400"
      :footer="null"
      @cancel="cancel"
    >
      <a-form-model
          ref="ruleForm"
          :model="params"
          :rules="rules"
          class="joinForm"
        >
          <a-form-model-item ref="oldPassword" label="" prop="oldPassword">
            <a-input
              type="password"
              placeholder="当前密码"
              v-model='params.oldPassword'
              @blur="() => {
                  $refs.oldPassword.onFieldBlur();
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="newPassword" label="" prop="newPassword">
            <a-input
              type="password"
              placeholder="新密码"
              v-model='params.newPassword'
              @blur="() => {
                  $refs.oldPassword.onFieldBlur();
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="oldPasswordTow"  label="" prop="oldPasswordTow" >
            <a-input
              type="password"
              placeholder="确认密码"
              v-model='params.oldPasswordTow'
              @blur="() => {
                  $refs.oldPassword.onFieldBlur();
                }
              "
            />
          </a-form-model-item>
        </a-form-model>
        <div class="btnClass">
          <a-button @click="cancel" class="cancel commonBtn">取消</a-button>
          <a-button type="primary" class="commonBtn" @click="confirmClick">确认</a-button>
        </div>
    </a-modal>
  </div>
</template>
<script>
// import { captchaImage } from '@/api/user'
import { updatePwd } from '@/api/accountInfos'

export default {
  props: {},
  data() {
    var validateNewReapeat = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.params.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      Visible: true,
      params:{
        oldPassword:'',
        newPassword:'',
        // code:'',
        oldPasswordTow:'',
      },
      // curCaptchaPath:'',
      rules: { 
        oldPassword: [{ required: true, message: '请输入旧密码!', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入新密码!', trigger: 'blur' },
          {
            pattern: /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/,
            message: "请输入6-20位含有字母、数字或符号！"}
        ],
        oldPasswordTow: [{ required: true, validator: validateNewReapeat, trigger: 'blur' }]
      },
    }
  },
  mounted() {
    // 验证码
    // this.getCaptchaImage()
  },
  methods: {
    showModal() {},
    handleOk() {
      this.$emit('handlerOk')
    },
    handleCancel() {
      this.$emit('cancelVisible', false)
    },
    changeCaptch(){
      this.getCaptchaImage()
    },
    cancel(){
      this.$emit('cancel')
    },
    confirmClick(){
      if(this.params.newPassword !== this.params.oldPasswordTow){
        this.$message.warning('两次输入的密码不相同!')
        return
      }
      if(this.params.oldPassword === '' && this.params.oldPasswordTow === '' && this.params.oldPasswordTow === ''){
        this.$message.warning('请输入对应的信息!')
        return
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          updatePwd(this.params).then(res=>{
            if(res.code === 200){
              this.$message.success('修改密码成功!')
              this.$router.push({name:'Login'})
            }else{
              this.$message.warning(res.msg)
            }
          })
        }else {
          return false;
        }
        
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.joinForm{
  padding: 0 20px;
}
.btnClass{
  display: flex;
  justify-content: center;
  .cancel{
    margin-right: 20px;
  }
  .commonBtn{
    width: 120px !important;
  }
  
}
.code{
    width: 100%;
    display: flex;
    align-items: center;
    input{
      width: 200px;
    }
    .pass-verifyCode{
      width: 60px;
      min-height: 32px !important;
      max-height: 32px !important;
      margin-bottom: 5px;
    }
  }
</style>